<template>
  <!-- start 产品模板列表 -->
  <div class="product-template-list-view" ref="productTemplateListPage" v-loading.fullscreen.lock="loadingListData" >
    
    <!-- start 搜索 -->
    <div ref="tableHeaderContainer" class="product-template-list-search-group">

      <!-- start  搜索header -->
      <form class="base-search" onsubmit="return false;">
        <div class="product-template-list-base-search-group input-with-append-search">
          <el-input v-model="searchModel.keyword" :placeholder="$t('product.productTemplate.placeholder.keyword')" v-trim:blur class="mar-r-12">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-button
              type="primary"
              slot="append"
              @click="searchModel.pageNum=1;search();trackEventHandler('search')"
              native-type="submit"
              v-track="$track.formatParams('KEYWORD_SEARCH')">{{$t('common.base.search')}}
            </el-button>
          </el-input>
          <el-button type="plain-third" @click="resetParams" v-track="$track.formatParams('RESET_SEARCH')">{{$t('common.base.reset')}}</el-button>
        </div>
        <span class="advanced-search-visible-btn" @click.self.stop="panelSearchAdvancedToggle">
          <i class="iconfont icon-filter"></i>
          {{$t('component.advancedSearch.title')}}
        </span>
      </form>
      <!-- end 搜索 header -->

      <!-- start 高级搜索表单 -->
      <product-template-search-panel
        :config="{
          fields: this.productFields,
        }"
        ref="searchPanel"
      >
        <div class="advanced-search-btn-group" slot="footer">
          <el-button type="plain-third" @click="resetParams" v-track="$track.formatParams('RESET_SEARCH')">{{$t('common.base.reset')}}</el-button>
          <el-button type="primary" @click="powerfulSearch" native-type="submit" v-track="$track.formatParams('ADVANCED_SEARCH')">{{$t('common.base.search')}}</el-button>
        </div>
      </product-template-search-panel>
      <!-- end 高级搜索表单 -->

    </div>
    <!-- end 搜索 -->

    <!-- start content -->
    <div class="product-template-list-content">
      <!--operation bar start-->
      <div ref="tableDoContainer" class="operation-bar-container">
        <div class="top-btn-group flex-x">
          <el-button type="primary" @click="productCreate" v-if="authCreate" v-track="$track.formatParams('TO_CREATE')">
            <i class="iconfont icon-add2"></i>{{$t('common.base.create')}}
          </el-button>
          <el-button type="plain-third" v-if="authEdit === 3" @click="openDialog('edit')" v-track="$track.formatParams('BATCH_EDIT')">
            <i class="iconfont icon-edit-square"></i>
            {{$t('common.base.bulkEdit')}}
          </el-button>
          <el-button type="plain-third" v-if="authDelete" @click="productDelete" v-track="$track.formatParams('DELETE')">
            <i class="iconfont icon-delete"></i>
            {{$t('common.base.delete')}}
          </el-button>
        </div>
        <!-- end operation bar-->

        <!-- start 操作按钮组 -->
        <div class="action-button-group">
          <el-dropdown trigger="click" v-if="(authExport || authImport) && isButtonDisplayed">
            <span class="el-dropdown-link cur-point" @click="trackEventHandler('moreAction')">
              {{$t('common.base.moreOperator')}}
              <i class="iconfont icon-fdn-select"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="!isExperienceEdition && isButtonDisplayed && authImport">
                <div @click="openDialog('importProduct')" v-track="$track.formatParams('IMPORT_PRODUCT_TEMPLATE', null, 'MORE_ACTIONS')">{{ $t('product.productType.importProductTemplate') }}</div>
              </el-dropdown-item>
              <el-dropdown-item v-if="authExport">
                <div @click="exportProduct(false)" v-track="$track.formatParams('EXPORT', null, 'MORE_ACTIONS')">{{ $t('common.base.export') }}</div>
              </el-dropdown-item>
              <el-dropdown-item v-if="authExport"> 
                <div @click="exportProduct(true)" v-track="$track.formatParams('EXPORT_ALL', null, 'MORE_ACTIONS')">{{ $t('common.base.exportAll') }}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span class="el-dropdown-link cur-point mar-l-12" @click="showAdvancedSetting" v-track="$track.formatParams('SELECT_COLUMN')">
            {{ $t('common.base.choiceCol') }}
            <i class="iconfont icon-fdn-select"></i>
          </span>
        </div>
        <!-- end 操作按钮组 --> 

      </div>
      <!-- end  -->

      <!-- <div ref="BaseSelectionBarComponent" class="base-selection-wrapper">
        <base-selection-bar ref="baseSelectionBar" v-model="multipleSelection" @toggle-selection="selectionToggle" @show-panel="() => panelTheMultipleSelectionShow = true" />
      </div> -->

      <!-- start 表格 -->
      <section style="padding:0 16px;background:#fff;">
      <el-table
        v-table-style
        :data="page.list || []"
        :row-key="getRowKey"
        stripe
        :border="true"
        :height="tableContainerHeight"
        @select="selectionHandle"
        @select-all="selectionHandle"
        @sort-change="sortChange"
        @header-dragend="headerDragend"
        :highlight-current-row="false"
        header-row-class-name="product-template-table-header"
        ref="productTemplateTable" 
        class="bbx-normal-list-box product-template-table">
        <template slot="empty">
          <BaseListForNoData v-show="!loadingListData" :notice-msg="$t('common.base.tip.noData')"></BaseListForNoData>
        </template>
        <el-table-column type="selection" width="48" align="center" class-name="select-column"></el-table-column>
        <el-table-column
          v-for="(column, index) in columns"
          v-if="column.show"
          :key="`${column.fieldName}_${index}`"
          :label="column.displayName"
          :prop="column.fieldName"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :sortable="column.sortable"
          :show-overflow-tooltip="getCommonListShowTooltip(column)"
          :fixed="column.fixLeft || false"
          :align="column.align">

          <template slot-scope="scope">
            <template v-if="column.fieldName === 'name'">
              <a
                href=""
                class="view-detail-btn"
                @click.stop.prevent="goProductTemplateView(scope.row.id)"
              >
                {{scope.row[column.fieldName]}}
              </a>
            </template>
            <template v-else-if="column.formType === 'location'">
              {{ scope.row.attribute[column.fieldName] && scope.row.attribute[column.fieldName].address}}
            </template>
            <template v-else-if="column.formType == 'related_task'">
              {{ getRelatedTask(scope.row.attribute[column.fieldName]) }}
            </template>
            <template v-else-if="column.formType === 'address'">
              {{ scope.row.attribute[column.fieldName] && scope.row.attribute[column.fieldName].all}}
            </template>
            <template v-else-if="column.fieldName === 'createUser'">
              <template v-if="isOpenData && scope.row.createUser">
                <open-data type='userName' :openid="scope.row.createUser.staffId"></open-data>
              </template>
              <template v-else>
                {{ scope.row.createUser && scope.row.createUser.displayName }}
              </template>
            </template>
           
            <template v-else-if="column.formType === 'user' && scope.row.attribute[column.fieldName]">
              <template v-if="isOpenData">
                <open-data v-for="staffId in getUserIds(scope.row.attribute[column.fieldName])" :key="staffId" type="userName" :openid="staffId"></open-data>
              </template>
              <template v-else>
                {{ getUserName(column, scope.row.attribute[column.fieldName]) }}
              </template>
            </template>

            <template v-else-if="column.fieldName === 'createTime'">
              {{ scope.row.createTime | formatDate }}
            </template>
            <div v-else-if="column.formType === 'textarea'" v-html="buildTextarea(scope.row.attribute[column.fieldName])" @click="openOutsideLink">
            </div>
            <template v-else>
              {{ $formatFormField(column, scope.row) }}
            </template>
            
          </template>
        </el-table-column>
      </el-table>
      </section>
      <!-- end 表格 -->

      <!-- start 表格底部 -->
      <div ref="tableFooterContainer" class="table-footer bbx-normal-table-footer-10">
        <div class="list-info">
          <i18n path="common.base.table.totalCount">
            <span place="count" class="level-padding">{{ page.total || 0 }}</span>
          </i18n>
          <template v-if="multipleSelection&&multipleSelection.length>0">
            <i18n path="common.base.table.selectedNth">
              <span place="count" class="product-template-selected-count" @click="panelTheMultipleSelectionShow = true">{{ multipleSelection.length }}</span>
            </i18n>
            <span class="product-template-selected-count" @click="selectionToggle()">{{$t('common.base.clear')}}</span>
          </template>
        </div>
        <el-pagination
          class="product-template-table-pagination"
          background
          @current-change="jump"
          @size-change="handleSizeChange"
          :page-sizes="defaultTableData.defaultPageSizes"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total">
        </el-pagination>
      </div>
      <!-- end 表格底部 -->

    </div>
    <!-- end content -->

    <!-- start 导入产品 -->
    <base-import
      title="导入产品"
      ref="importProductTemplateModal"
      @success="search"
      :action="productTemplateImport">
      <div slot="tip">
        <div class="base-import-warn">
          <i18n path="common.base.importModal.downloadTemplateTip" tag="span">
            <a place="link" :href="productTemplateImportTem">{{$t('common.base.importModal.importTemplate')}}</a>
          </i18n>
        </div>
      </div>
    </base-import>
    <!-- end 导入客户 -->

    <!-- start 导出 -->
    <base-export
      ref="exportProductTemplatePanel"
      :storage-key="exportStorageKey"
      :columns="exportColumns()"
      :build-params="exportParamsBuild"
      :validate="exportCountCheck"
      method="post"
      :action="exportProductTemplate"/>
    <!-- end 导出 -->

    <!-- start 已选择列表 -->
    <base-panel :show.sync="panelTheMultipleSelectionShow" width="420px">
      <h3 slot="title">
        <span>{{$t('product.productTemplate.text.text1')}}({{ multipleSelection.length }})</span>
        <i 
          v-if="multipleSelection.length > 0"
          class="iconfont icon-qingkongshanchu product-template-panel-btn" 
          @click="selectionToggle()" 
          title="清空已选中数据" data-placement="right" v-tooltip></i>
      </h3>

      <div class="product-template-selected-panel">
        <div class="product-template-selected-tip" v-if="multipleSelection.length <= 0">
          <img :src="noDataImage">
          <p>{{ $t('product.list.tips.noDataTip1') }}</p>
        </div>
        <template v-else>
          <div class="product-template-selected-list">
            <div class="product-template-selected-row product-template-selected-head">
              <span class="product-template-selected-name">{{ $t('common.base.name') }}</span>
              <span class="product-template-selected-sn">{{ $t('common.base.serialNumber') }}</span>
            </div>
            <div class="product-template-selected-row" v-for="item in multipleSelection" :key="item.id" >
              <span class="product-template-selected-name">{{ item.name }}</span>
              <span class="product-template-selected-sn">{{ item.serialNumber }}</span>
              <el-button class="product-template-selected-delete" @click="selectProductTemplateCancel(item)">
                <i class="iconfont icon-fe-close"></i>
              </el-button>
            </div>
          </div>
        </template>
      </div>
    </base-panel>
    <!-- end 已选择列表 -->

    <!-- start  批量编辑 -->
    <batch-edit-product-template-dialog
      ref="batchEditProductTemplateDialog"
      :fields="productFields"
      :config="{fields: fieldsInfo, productTypes: initData.productConfig.productTypes}"
      :callback="search"
      :selected-ids="selectedIds">

    </batch-edit-product-template-dialog>
    <!-- end 批量编辑 -->
    
    <!-- <base-table-advanced-setting ref="advanced" @save="columnStatusModify"/> -->
    <biz-select-column ref="advanced"  @save="saveColumnStatus" />
  </div>
  <!-- end 产品模板列表 -->
</template>

<script>
// pageDes 产品模板列表
import { isOpenData, openAccurateTab } from '@src/util/platform';
import { checkButtonDisplayed } from '@src/util/dom';
import _ from "lodash";
import Page from "@model/Page";
import platform from "@src/platform"
import { safeNewDate } from '@src/util/time';
import { getSortableMinWidth, defaultTableData } from '@src/util/table';

import { getProductTemplateList, productTemplateDelete, getProductFields } from "@src/api/ProductApi.js"

import SearchPanel from './component/SearchPanel.vue';
import DialogBatchEditProductTemplate from './component/DialogBatchEditProductTemplate.vue';
/* mixin */
import ThemeMixin from '@src/mixins/themeMixin/index.ts'
import VersionMixin from '@src/mixins/versionMixin/index.ts'
/* export & import */
import { exportProductTemplate } from '@src/api/Export';
import { productTemplateImport, productTemplateImportTem } from '@src/api/Import';

import { storageSet, storageGet } from '@src/util/storageV2';
import { getSystemNormalSearchInputForLength } from '@model/utils/getSystemConfig.ts'
import { formatDate, useFormTimezone } from 'pub-bbx-utils'
const { disposeFormListViewTime } = useFormTimezone()

/* 高级搜索面板 列数 */
const PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER = "product_template_list_advance_search_column_number";
/* 高级搜索 搜索数据 */
const STORE_USER_FOR_SEARCH_PRODUCT_TEMPLATE = "store_user_for_search_product_template";
// 产品模板列表数据
const PRODUCT_TEMPLATE_LIST_DATA = "product_template_list_data";
// 产品模板列表选择
const PRODUCT_CHECK = "productCheck"

const link_reg = /((((https?|ftp?):(?:\/\/)?)(?:[-;:&=\+\$]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\?\+=&;:%!\/@.\w_]*)#?(?:[-\+=&;%!\?\/@.\w_]*))?)/g
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import StorageKeyEnum from '@model/enum/StorageKeyEnum'
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'product-template-list-view',
  mixins: [VersionMixin, ThemeMixin],
  props: {
    initData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      defaultTableData,
      noDataImage,
      exportStorageKey: StorageKeyEnum.ProductTemplateExport,
      isButtonDisplayed: checkButtonDisplayed(),
      isOpenData,
      auth: {}, // 权限
      columns: this.buildTableFixedColumns(), // 列
      columnNum: 1, // 高级搜索 列数
      createTimePickerOptions: {
        shortcuts: [{
          text: this.$t('common.base.aboutTime.nearlyWeek'),
          onClick(picker) {
            const end = safeNewDate();
            const start = safeNewDate();
            start.setTime(start.getTime() - (3600 * 1000 * 24 * 7));
            picker.$emit("pick", [start, end]);
          }
        }, {
          text: this.$t('common.base.aboutTime.nearlyMonth'),
          onClick(picker) {
            const end = safeNewDate();
            const start = safeNewDate();
            start.setTime(start.getTime() - (3600 * 1000 * 24 * 30));
            picker.$emit("pick", [start, end]);
          }
        }, {
          text: this.$t('common.base.aboutTime.lastThreeMonths'),
          onClick(picker) {
            const end = safeNewDate();
            const start = safeNewDate();
            start.setTime(start.getTime() - (3600 * 1000 * 24 * 90));
            picker.$emit("pick", [start, end]);
          }
        }]
      }, // 日期配置
      inputRemoteSearch: {
        type: {
          options: [],
          loading: false,
        },
        creator: {
          options: [],
          loading: false,
        },
      }, // 远程搜索配置项
      loadingListData: true, // 加载列表数据
      multipleSelection: [], // 已选择列表
      searchCustomizeFields: [], // 搜索自定义字段
      selectedLimit: 500, // 最大选择数量
      page: new Page(), // page 对象
      panelTheMultipleSelectionShow: false, // 已选择列表 面板显示
      productTemplateConfig: {
        productTemplateConfig: {},
        productFields: []
      }, // 产品配置项
      searchModel: {
        keyword: "",
        pageSize: 10,
        pageNum: 1,
        orderDetail: {},
        moreConditions: {
          conditions: [],
        },
      },
      fieldsInfo:[],
      exportProductTemplate,
      productTemplateImport,
      productTemplateImportTem,
      tableContainerHeight:'440px',
    }
  },
  computed: {
    // 高级搜索 占位符
    advancedSearchPlaceholder() {
      let fields = this.fieldsInfo || [];
      return {
        name: fields.filter(f => f.fieldName == "name")[0].placeHolder || "",
        serialNumber: fields.filter(f => f.fieldName == "serialNumber")[0].placeHolder || "",
        type: fields.filter(f => f.fieldName == "name")[0].placeHolder || "",
      }
    },
    // 编辑权限
    authEdit() {
      return this.auth.PRODUCT_MODULE_EDIT;
    },
    authCreate() {
      return this.auth.PRODUCT_MODULE_CREATE;
    },
    // 删除权限
    authDelete() {
      return (this.authEdit == 3 && this.auth.PRODUCT_MODULE_DELETE);
    },
    // 导出权限
    authExport() {
      return this.auth.PRODUCT_MODULE_EXPORT;
    },
    authImport() {
      return this.auth.PRODUCT_MODULE_IMPORT && this.authCreate
    },
    /* 已选择 id列表 */
    selectedIds() {
      return this.multipleSelection.map(item => item.id) || [];
    },
    productFields() {
      return (this.fieldsInfo || [])
        .filter(f => f.formType !== 'separator' && f.formType !== 'autograph')
        .map(f => {

          // 调整字段顺序
          if (f.fieldName === "name") {
            f.orderId = -10;
          }

          if (f.fieldName === "serialNumber") {
            f.orderId = -9;
          }

          if (f.fieldName === "type") {
            f.orderId = -8;
          }

          return f;
        })
        .sort((a, b) => a.orderId - b.orderId)
    },
  },
  filters: {
    formatDate(val) {
      if (!val) return "";
      return formatDate(val, "YYYY-MM-DD HH:mm:ss")
    },
  },
  async mounted() {
    this.auth = (this.initData && this.initData.authorities) || {};

    const { status, data, message } = await getProductFields({isFromSetting:false});
    if( status == 0 ){
      // 暂时屏蔽掉产品地址新系统字段后续再做兼容
      this.fieldsInfo = data.filter(item => item.fieldName != 'qualityInfo' && item.fieldName != 'productCompleteAddress' && item.fieldName !== 'serviceProviders');
    }
    this.productTemplateConfig = {
      productConfig: (this.initData && this.initData.productConfig) || {productType: []},
      productFields: (this.fieldsInfo || []).sort((a, b) => a.orderId - b.orderId)
    };
    this.inputRemoteSearch.type.options = [...this.productTemplateConfig.productConfig.productType];

    this.paramsSearchRevert();
    this.columns = this.buildTableColumn();
    this.search();
    let that_ = this;
    // 监听切换后需要重新计算列表高度 后续可以用activated生命周期替换
    window.addEventListener('message', (event)=> {
      const {action, data} = event.data;
      if (action == 'shb.frame.activatedPage'){
        that_.$nextTick(()=> {
          that_.knowTableContainerHeight();
        })
      }
    });
    this.$nextTick(()=> {
      this.knowTableContainerHeight()
      window.onresize = _.debounce(()=>{
        that_.knowTableContainerHeight()
      }, 500)
    })
  
    // [tab_spec]标准化刷新方式
    window.__exports__refresh = this.search;
  },
  methods: {
    /**
     * @description 修改选择列设置
     * @param {Object} event 事件对象
     */
    saveColumnStatus (event) {
      let columns = event.data || [];
      this.columns = [];
      this.$nextTick(() => {
        this.$set(this, 'columns', columns.slice());
        this.saveColumnStatusToStorage();
      });
      this.$message.success(this.$t('common.base.saveSuccess'));
    },
    // 保存选择列配置到本地
    saveColumnStatusToStorage () {
      const localStorageData = this.getLocalStorageData();
      let columnsStatus = null;
      // 判断是否存储选择列
      const columnsList = data.columns.map(c => ({
        fieldName: c.fieldName,
        show: c.show,
        width: c.width,
        fixLeft: c.fixLeft
      }));
      if (localStorageData.columnStatus) {
        localStorageData.columnStatus = columnsList;
        columnsStatus = localStorageData.columnStatus;
      } else {
        columnsStatus = columnsList;
      }
      saveDataToStorage('columnStatus', columnsStatus);
    },
    // 获取本地localstorage
    getLocalStorageData() {
      const dataStr = storageGet(PRODUCT_TEMPLATE_LIST_DATA, '{}');
      return JSON.parse(dataStr);
    },
    // 保存数据到本地localstorage
    saveDataToStorage (key, value){
      const data = getLocalStorageData();
      data[key] = value;
      storageSet(PRODUCT_TEMPLATE_LIST_DATA, JSON.stringify(data));
    },
 
    getRelatedTask(field) {
      return Array.isArray(field) ? field.map(item => item.taskNo).join(",") : "";
    },
    showAdvancedSetting(){
      window.TDAPP.onEvent("pc：产品管理-选择列事件");

      this.$refs.advanced.open(this.columns);
    },
    buildParams() {
      const sm = Object.assign({}, this.searchModel);
      let params = {
        keyword: getSystemNormalSearchInputForLength(sm.keyword),
        pageSize: sm.pageSize,
        pageNum: sm.pageNum,
      };

      if (Object.keys(sm.orderDetail || {}).length) {
        params.orderDetail = sm.orderDetail;
      }

      if (Object.keys(sm.moreConditions).length > 1 || sm.moreConditions.conditions.length) {
        params = {
          ...params,
          ...sm.moreConditions,
        }
      }

      return params
    },
    // 构建表格固定列
    buildTableFixedColumns() {
      // return []
      return [{
        displayName: this.$t('product.productTemplate.fields.name.displayName'),
        fieldName: "name",
        show: true,
        fixed: false,
        minWidth: "150px",
      }, {
        displayName: this.$t('product.productTemplate.fields.serialNumber.displayName'),
        sortable: "custom",
        fieldName: "serialNumber",
        fixed: false,
        show: true,
      }, {
        displayName: this.$t('product.productTemplate.fields.type.displayName'),
        fieldName: "type",
        show: true,
        fixed: false,
      }, {
        displayName: this.$t('common.base.createUser'),
        fieldName: "createUser",
        show: true,
        fixed: false,
      }, {
        displayName: this.$t('common.base.createTime'),
        fieldName: "createTime",
        sortable: "custom",
        minWidth: "150px",
        show: true,
        fixed: false,
      }]
    },
    buildDefaultColumns(){
      return [
        "name",
        "customer",
        "serialNumber",
        "type"
      ]
    },
    // 构建表格列
    buildTableColumn() {
      const localStorageData = this.localStorageGet(PRODUCT_TEMPLATE_LIST_DATA);
      let columnStatus = localStorageData[PRODUCT_TEMPLATE_LIST_DATA] || [];
      let localColumns = columnStatus
        .map(i => typeof i == "string" ? {fieldName: i, show: true} : i)
        .reduce((acc, col) => (acc[col.fieldName] = col) && acc, {});

      let baseColumns = this.buildTableFixedColumns();
      let customizedColumns = this.productTemplateConfig.productFields
        .filter(f => !f.isSystem && f.formType !== 'attachment' && f.formType !== 'separator' && f.formType !== 'info' && f.fieldName !== 'customer' && f.formType !== 'autograph')
        .map(field => {
          let sortable = false;
          let minWidth = null;

          if (
            ["date", "datetime", "number"].includes(field.formType) ||
            ['type', 'serialNumber'].includes(field.fieldName)
          ) {
            sortable = "custom";
            minWidth = 100;
          }

          if (field.displayName.length > 4) {
            minWidth = field.displayName.length * 20;
          }

          if (sortable && field.displayName.length >= 4) {
            minWidth = getSortableMinWidth(field)
          }

          if (field.formType === "datetime") {
            minWidth = Math.max(150, minWidth);
          }

          return {
            ...field,
            displayName: field.displayName,
            fieldName: field.fieldName,
            formType: field.formType,
            minWidth: typeof minWidth == "number" ? minWidth : `${minWidth}px`,
            sortable,
            isMulti: field.setting && field.setting.isMulti,
            isSystem: field.isSystem,
          };
        });
      let columns = [...baseColumns, ...customizedColumns].map(col => {
        let show = col.show === true;
        let { width } = col;
        let localField = localColumns[col.fieldName];
        let fixLeft = localField?.fixLeft || null;
        if(null != localField){
          width = typeof localField.width == 'number'
            ? `${localField.width}px`
            : `${localField.width}`.indexOf('px') ? localField.width : '';
          show = localField.show !== false;
        }

        col.show = show;
        col.width = width;
        col.type = "column";
        col['fixLeft'] = fixLeft && 'left'
        return col;
      });

      return columns;
    },
    // 兼容旧版本的 已选择列
    backwardCompatibleColumn() {
      let checkedColumnsOldVersion = localStorage.getItem(PRODUCT_CHECK);

      if (!checkedColumnsOldVersion) return;

      let columns = checkedColumnsOldVersion.split(",");
      localStorage.removeItem(PRODUCT_CHECK);

      return (columns || []).filter(c => c)
        .map(c => {
          return c;
        })
    },  
    // 修改列状态
    columnStatusModify(event) {
      let columns = event.data || [];
      let colMap = columns.reduce((acc, col) => (acc[col.fieldName] = col) && acc, {});

      this.columns.forEach(col => {
        let newCol = colMap[col.fieldName];
        if(null != newCol) {
          this.$set(col, "show", newCol.show);
          this.$set(col, "fixLeft", newCol.fixLeft);
        }
      })

      const columnsStatus = this.columns.map(c => ({fieldName: c.fieldName, show: c.show, fixLeft: c.fixLeft}));
      this.localStorageSet(PRODUCT_TEMPLATE_LIST_DATA, columnsStatus, PRODUCT_TEMPLATE_LIST_DATA);
    },
    // 连接数组和 key去重
    concatArrayAndItemUnique(arr1, arr2, key) {
      // 数组中的对象根据id去重
      let obj = {};
      if (!arr1 || !arr1.length) return arr2 || [];
      if (!arr2 || !arr2.length) return arr1 || [];
      return [...arr1, ...arr2].reduce((cur, next) => {
        obj[next[key]] ? "" : obj[next[key]] = true && cur.push(next);
        return cur;
      }, []);
    },
    /** 把对象中!!为false的值去除（eg. false, undefined, null...），except 可以把想保留的值留下(eg.[0])
    * 主要用于向后端传参，把无用的空值过滤掉
    * var a = { a: 0, b: 1, c: null, d: undefined, e: false}
    * deleteValueFromObject(a) =>  {b: 1}
    * deleteValueFromObject(a, [0]) =>  {a: 0, b: 1}
    */
    deleteValueFromObject(sourceObj, except = []) {
      let obj = _.cloneDeep(sourceObj);
      if (except.length) {
        Object.keys(obj)
          .forEach(key => {
            if (typeof obj[key] === "object" && obj[key]) {
              obj[key] = this.deleteValueFromObject(obj[key], except);
            }
            if (!obj[key] && except.every(ex => ex !== obj[key])) {
              delete obj[key];
            }
          });
      } else {
        Object.keys(obj)
          .forEach(key => {
            if (typeof obj[key] === "object" && obj[key]) {
              obj[key] = this.deleteValueFromObject(obj[key]);
            }
            if (!obj[key]) {
              delete obj[key];
            }
          });
      }
      if (Object.keys(obj).length) {
        return obj;
      } 
      return undefined;
    },
    // 构建产品导出参数
    exportParamsBuild(checkedArr, ids) {
      let exportAll = !ids || ids.length == 0;
      let exportSearchModel = exportAll ? {
        ...this.buildParams(),
        exportTotal: this.page.total
      } : {exportTotal: ids.length};
  
      return {
        productChecked: checkedArr.join(","),
        data: exportAll ? "" : ids.join(","),
        exportSearchModel: JSON.stringify(exportSearchModel)
      };
    },
    // 导出 列
    exportColumns() {
      return this.columns.map(c => {
        if (c.fieldName !== "customerAddress" && c.fieldName !== "remindCount" && c.fieldName !== "updateTime") {
          c.export = true;
        }
        return {
          ...c,
          label: c.displayName,
          field: c.fieldName
        };
      });
    },
    /** 
    * 导出产品
    * @param {Boolean} exportAll -- 是否导出全部
    */
    exportProduct(exportAll = false) {
      let ids = [];
      let fileName = `${formatDate(safeNewDate(), "YYYY-MM-DD")}${this.$t('product.productTemplate.text.text2')}.xlsx`;

      if (!exportAll) {
        if (!this.multipleSelection.length) return this.$platform.alert(this.$t('common.base.tip.exportUnChooseTip'));
        ids = this.selectedIds;
      }
      this.$refs.exportProductTemplatePanel.open(ids, fileName);
    },
    // 检测导出条数
    exportCountCheck(ids, max){
      let exportAll = !ids || ids.length == 0;

      return exportAll && this.page.total > max ? this.$t('common.base.exportModal.oversizeTips', {size: max}) : null;
    },
    // 跳转 产品模板信息
    goProductTemplateView(id) {
      let fromId = window.frameElement.getAttribute("id");

      // this.$platform.openTab({
      //   id: `product_template_view_${id}`,
      //   title: "产品模板信息",
      //   close: true,
      //   url: `/product/detail/${id}?noHistory=1`,
      //   fromId
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductTemplate,
        key: id,
        params: 'noHistory=1',
        fromId
      })
    },
    // 页码数切换
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.searchModel.pageNum = 1;

      this.localStorageSet("pageSize", pageSize, PRODUCT_TEMPLATE_LIST_DATA);
      this.search();
    },
    // 跳转
    jump(pageNum) {
      this.searchModel.pageNum = pageNum;
      this.search();
    },
    /* 获取本地数据 */
    localStorageGet(key) {
      try {
        const dataStr = storageGet(key) || "{}"
        return JSON.parse(dataStr); 
      } catch (error) {
        console.log("error: ", error);
        return {}
      }
    },
    /* 设置本地数据 */
    localStorageSet(key, value, rootKey = null) {
      try {
        if(!rootKey) {
          storageSet(key, JSON.stringify(value));
        } else {
          const data = this.localStorageGet(rootKey);
  
          data[key] = value;
          storageSet(rootKey, JSON.stringify(data));
        }
      } catch(err) {
        console.log("localStorageSet err", err)
      } 
    },
    // 批量匹配选中
    matchSelected() {
      if (!this.multipleSelection.length) return;

      const selected = this.page.list
        .filter(c => {
          if (this.multipleSelection.some(sc => sc.id === c.id)) {

            this.multipleSelection = this.multipleSelection.filter(sc => sc.id !== c.id);
            this.multipleSelection.push(c);
            return c;
          }
        }) || [];

      this.$nextTick(() => {
        this.selectionToggle(selected);
      });
    },
    /** 
     * 打开弹窗
     * @param {String} type -- 弹窗类型
     */
    openDialog(type) {
      // 导出产品
      if (type === "importProduct") {
        this.$refs.importProductTemplateModal.open();
      }
      // 编辑
      if (type === "edit") {
        window.TDAPP.onEvent("pc：产品模板-批量编辑事件");
        this.$refs.batchEditProductTemplateDialog.open();
      }
    },
    // 搜索
    search() {
      const params = this.buildParams();

      this.loadingListData = true;

      return getProductTemplateList(params)
        .then(res => {
          if (!res || !res.list) {
            this.page = new Page();
          } else {
            res.list = disposeFormListViewTime(res?.list || [], this.columns)
              .map(l => {
                let attribute = l.attribute ? l.attribute : {};

                let list = {
                  ...l,
                  ...attribute,
                }
                return list;
              });
            this.page.merge(res)
            this.page.list = res.list
            
            // 把已选中的匹配出来
            this.matchSelected();
          }
          
          return res;
        })
        .then(() => {
          this.$refs.productTemplateListPage.scrollTop = 0;
          this.loadingListData = false;
        })
        .catch(err => {
          this.loadingListData = false;
          console.error("err", err);
        })
    },
    searchCreator(keyword) {
      this.inputRemoteSearch.creator.loading = true;
      return this.$http.get("/customer/userTag/list", { keyword, pageNum: 1 })
        .then(res => {
          if (res && res.list) {
            this.inputRemoteSearch.creator.options = res.list;
            this.inputRemoteSearch.creator.loading = false;
          }
          return res;
        })
        .catch(err => console.error("searchCreator function catch err", err));
    },
    // 设置高级搜索面板 列
    setAdvanceSearchColumn(command){
      this.columnNum = Number(command);
      try {
        localStorage.setItem(PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER, this.columnNum); 
      } catch (error) {
        console.log(error)
      }
    },
    // 取消选择的产品
    selectProductTemplateCancel(productItem) {
      if (!productItem || !productItem.id) return;

      this.multipleSelection = this.multipleSelection.filter(ms => ms.id !== productItem.id);
      this.multipleSelection.length < 1 ? this.selectionToggle() : this.selectionToggle([productItem]);
    },
    // 切换已选择
    selectionToggle(rows) {
      let isNotOnCurrentPage = false;
      let item = undefined;
      let row = undefined;

      if (rows) {
        for(let i = 0; i < rows.length; i++) {
          row = rows[i];
          isNotOnCurrentPage = this.page.list.every(item => {
            return item.id !== row.id;
          })
          if(isNotOnCurrentPage) return 
        }
        rows.forEach(row => {
          this.$refs.productTemplateTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.productTemplateTable.clearSelection();
        this.multipleSelection = [];
      }
    },
    // 操作选择
    selectionHandle(selection) {
      let tv = this.selectionCompute(selection);

      let original = this.multipleSelection
        .filter(ms => this.page.list.some(cs => cs.id === ms.id));

      let unSelected = this.page.list
        .filter(c => original.every(oc => oc.id !== c.id));

      if (tv.length > this.selectedLimit) {
        this.$nextTick(() => {
          original.length > 0
            ? unSelected.forEach(row => {
              this.$refs.productTemplateTable.toggleRowSelection(row, false);
            })
            : this.$refs.productTemplateTable.clearSelection();
        })
        return this.$platform.alert(this.$t('common.base.tip.choiceLimit', {limit: this.selectedLimit}));
      }

      this.multipleSelection = tv;

      this.$refs.baseSelectionBar?.openTooltip();
      this.$nextTick(()=>{
        this.knowTableContainerHeight()
      })
    },
    // 计算已选择
    selectionCompute(selection) {
      let tv = [];
      
      tv = this.multipleSelection
        .filter(ms => this.page.list.every(c => c.id !== ms.id));
      tv = _.uniqWith([...tv, ...selection], _.isEqual);

      return tv;
    },
    sortChange(option) {
      /**
       * 目前情况：
       * 所有字段理应后台获取，但是获取的所有字段中没有 createTime
       *
       */
      try {
        const {prop, order} = option;
        if (!order) {
          this.searchModel.orderDetail = {};
          return this.search();
        }

        let isSystem = ['createTime', 'updateTime', 'type', 'serialNumber'].includes(prop) ? 1 : 0

        let sortModel = {
          isSystem,
          sequence: order === "ascending" ? "ASC" : "DESC",
          column: isSystem ? `productTemplate.${prop}` : prop,
        };

        const sortedField = this.productTemplateConfig.productFields.filter(sf => sf.fieldName === prop)[0] || {};

        if (prop === "createTime" || prop === "updateTime" || sortedField.formType === "date" || sortedField.formType === "datetime") {
          sortModel.type = "date";
        } else {
          sortModel.type = sortedField.formType || 'text';
        }

        this.searchModel.orderDetail = sortModel;

        this.search();

      } catch (e) {
        console.error("product template sortChange err", e);
      }
    },
    // 搜索参数恢复
    paramsSearchRevert() {
      const localStorageData = this.localStorageGet(PRODUCT_TEMPLATE_LIST_DATA);

      if (localStorageData && localStorageData.pageSize) {
        this.searchModel.pageSize = Number(localStorageData.pageSize);
      }

      const num = localStorage.getItem(PRODUCT_TEMPLATE_LIST_ADVANCE_SEARCH_COLUMN_NUMBER) || 1;
      this.columnNum = Number(num);
    },
    // 产品新建
    productCreate() {

      window.TDAPP.onEvent('pc：产品模板-新建事件');

      // window.location = '/product/create';
      let fromId = window.frameElement.getAttribute("id");
      
      // this.$platform.openTab({
      //   id: "product_create",
      //   title: "新建产品模板",
      //   url: "/product/create",
      //   reload: true,
      //   close: true,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductCreate,
        reload: true,
        fromId
      })
    },
    // 产品 删除
    async productDelete() {
      window.TDAPP.onEvent("pc：产品模板-删除事件");

      if(this.multipleSelection.length <= 0) return platform.alert(this.$t('product.productTemplate.tips.tip2'));
      
      const confirm = await platform.confirm(this.$t('product.productTemplate.tips.tip3'));
      if(!confirm) return

      try {
        this.loadingListData = true;
        let result = await productTemplateDelete(this.selectedIds.join(","));
        const isSucc = (result.status == 0);

        this.$platform.notification({
          title: isSucc ? this.$t('product.productTemplate.tips.tip4') : this.$t('product.productTemplate.tips.tip5'),
          message: !isSucc && result.message,
          type: isSucc ? "success" : "error",
        });

        if(isSucc) {
          this.selectionToggle();
          this.search();
        } else {
          this.loadingListData = false;
        }

      } catch(err) {
        console.log(`productDelete err ${err}`)
      }
    },
    panelSearchAdvancedToggle() {
      window.TDAPP.onEvent("pc：产品模板-高级搜索事件");
      this.$refs.searchPanel.open();

      this.$nextTick(() => {
        let forms = document.getElementsByClassName("advanced-search-form");
        for(let i = 0; i < forms.length; i++) {
          let form = forms[i];
          form.setAttribute("novalidate", true)
        }
      })
    },
    /**  
     * @description 全量搜索
    */
    powerfulSearch() {
      this.searchModel.pageNum = 1;
      this.searchModel.moreConditions = this.$refs.searchPanel.buildParams();

      this.trackEventHandler("search");
      this.search();

    },
    resetParams() {
      window.TDAPP.onEvent("pc：产品模板-重置事件");
      this.searchIncludeMoreConditions = false;
      this.searchModel = {
        keyword: "",
        pageNum: 1,
        pageSize: this.page.pageSize,
        orderDetail: {},
        moreConditions: {
          conditions: [],
        }
      };

      this.$refs.searchPanel.resetParams();
      this.search();
    },
    // TalkingData事件埋点
    trackEventHandler (type) {
      if (type === "search") {
        window.TDAPP.onEvent("pc：产品模板-搜索事件");
        return;
      }
      if (type === "moreAction") {
        window.TDAPP.onEvent("pc：产品管理-更多操作事件");
        return;
      }
    },
    openOutsideLink(e) {
      let url = e.target.getAttribute("url");
      if (!url) return;
      if (!/http/gi.test(url)) return this.$platform.alert(this.$t('common.base.tip.outsideLinkTip'));
      this.$platform.openLink(url)
    },
    buildTextarea(value) {
      return value
        ? value.replace(link_reg, (match) => {
          return `<a href="javascript:;" target="_blank" url="${match}">${match}</a>`
        })
        : "";
    },
    getRowKey(row) {
      return row.id
    },
    // 处理人员显示
    getUserName(field, value) {
      // 多选
      if(Array.isArray(value)) {
        return value.map(i => i.displayName || i.name).join(",");
      }

      let user = value || {};
      return user.displayName || user.name;
    },
    getUserIds (value) {
      // 多选
      if (Array.isArray(value)) {
        return value.map((i) => i.staffId);
      }

      let user = value || {};
      return [user.staffId];
    },

    /**
     * @des 表单拖拽钩子函数
     */
    headerDragend(newWidth, oldWidth, column, event) {
      let data = this.columns
        .map((item) => {
          if (
            item.fieldName === column.property
            || item.field === column.property
          ) {
            item.width = column.width;
          }
          return item;
        })
        .map((item) => {
          return {
            fieldName: item.fieldName,
            show: item.show,
            width: item.width,
          };
        });
      this.modifyColumnStatus({ type: 'column', data });
    },
    /**
     * @description 修改选择列设置
     * @param {Object} event 事件对象
     */
    modifyColumnStatus(event) {
      let columns = event.data || [],
        colMap = columns.reduce(
          (acc, col) => (acc[col.fieldName] = col) && acc,
          {}
        );
      this.columns.forEach((col) => {
        let newCol = colMap[col.fieldName];
        if (null != newCol) {
          this.$set(col, 'show', newCol.show);
          this.$set(col, 'width', newCol.width);
        }
      });

      this.saveColumnStatusToStorage();
    },

    saveColumnStatusToStorage() {
      const localStorageData = this.localStorageGet(PRODUCT_TEMPLATE_LIST_DATA);
      let columnsStatus = null;

      // 判断是否存储选择列
      const columnsList = this.columns.map((c) => ({
        fieldName: c.fieldName,
        show: c.show,
        width: c.width,
        fixLeft: c.fixLeft
      }));

      if (localStorageData.columnStatus) {
        localStorageData.columnStatus[
          `${PRODUCT_TEMPLATE_LIST_DATA}`
        ] = columnsList;
        columnsStatus = localStorageData.columnStatus;
      } else {
        columnsStatus = {
          [`${PRODUCT_TEMPLATE_LIST_DATA}`]: columnsList,
        };
      }

      this.localStorageSet(PRODUCT_TEMPLATE_LIST_DATA, columnsStatus);
    },
    /**
     * @des 获取列表当前的可滚动高度
     */
		 knowTableContainerHeight(){
      let min = 440;
      try {
        let window_ = window.innerHeight;
        let header = this.$refs.tableHeaderContainer?.offsetHeight || 0;
        let do_ = this.$refs.tableDoContainer?.offsetHeight || 0;
        let footer = this.$refs.tableFooterContainer?.offsetHeight || 0;
        let selection = this.$refs.BaseSelectionBarComponent?.offsetHeight || 0;
        min = window_ - header * 1 - do_ * 1 - footer * 1 - selection * 1  - 24 - 12 ;
        console.log(window_, header, do_, footer, selection, 'window_, header, do_, footer, selection');
        console.log(min, 'min')
        min = min > 440 ? min : 440;
      } catch (error) {
        console.warn(error, 'error try catch');
      }
      this.$set(this, 'tableContainerHeight', `${min}px`)
    },
    changePackUp(){
      this.packUp = !this.packUp;
      this.$nextTick(()=>{
        this.knowTableContainerHeight()
      })
    },
  },
  components: {
    [DialogBatchEditProductTemplate.name]: DialogBatchEditProductTemplate,
    [SearchPanel.name]: SearchPanel,
  }
}
</script>

<style lang="scss">

html, body {
  height: 100%;
}
.product-template-list-view {
  height: 100%;
  overflow: auto;
  padding: 10px;

  .panel-title {
    border-bottom: 1px solid rgb(242, 248, 247);
    color: rgb(132, 138, 147);

    font-size: 16px;
    font-weight: normal;
    line-height: 60px;

    display: flex;
    justify-content: space-between;

    padding: 0 25px;

    .iconfont:hover {
      cursor: pointer;
    }

  }
}

// search
.product-template-list-search-group {

  .advanced-search-function, .base-search {
    background: #fff;
    border-radius: 4px;
  }

  .base-search {
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;

    .product-template-list-base-search-group {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-input {
        width: 400px;
        input {
          border-radius: 4px 0 0 4px
        }
      }

      a {
        line-height: 33px;
      }

    }

    .advanced-search-visible-btn {
      background: #fff;
      border-color: $color-primary;
      @include fontColor();
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      white-space: nowrap;
      padding: 0;
      margin-left: 25px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.advanced-search-form {

  .two-columns {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 50%;
    }
  }

  .el-form-item {
    .el-form-item__content,
    .el-select,
    .base-dist-picker,
    .el-cascader,
    .el-date-editor {
      width: 290px !important;
    }
  }

  .advanced-search-btn-group {
    background: #fff;

    display: flex;
    justify-content: flex-end;

    width: 100%;
    padding: 15px 20px;

    position: absolute;
    bottom: 0px;

    .base-button {
      margin: 0 10px;
    }
  }
}

.advanced-search-function {
  margin-top: 10px;
  padding-bottom: 10px;

  h4 {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
  }

  .el-row {
    padding: 5px 0;
  }
  .input-label {
    text-align: right;
    line-height: 32px;
    padding-right: 0;
  }

}

// list 
.product-template-list-content {
  margin-top: 12px;

  .product-template-table {
    border-top: none;

    &:before {
      height: 0;
    }

    .product-template-table-header th {
      background: #fafafa;
      color: $text-color-primary;
      font-weight: normal;
    }

    th {
      color: #333;
      font-size: 14px;
    }
    td {
      color: #666;
      font-size: 13px;
    }

    .view-detail-btn {
      @include fontColor();
    }

    .select-column .el-checkbox {
      position: relative;
      top: 3px;
    }
  }

  .table-footer {
    background: #fff;
    border-radius: 0 0 3px 3px;

    display: flex;
    justify-content: space-between;

    padding: 0px 10px 10px 10px ;

    .list-info {
      color: #767e89;

      font-size: 13px;
      line-height: 32px;

      margin: 0;

      .iconfont {
        position: relative;
        top: 1px;
      }
    }

    .el-pagination__jump {
      margin-left: 0;
    }
  }
}

.product-template-panel-btn{
  float: right;
  cursor: pointer;
  font-size: 14px;
  margin-right: 5px;

  &:hover{
    @include fontColor();
  }
}

// product-template selected panel 
.product-template-selected-count{
  cursor: pointer;
  @include fontColor();

  font-size: 13px;

  padding: 0 3px;
  width: 15px;

  text-align: center;
}

.product-template-selected-panel{
  font-size: 14px;
  height: calc(100% - 51px);
}

.product-template-selected-tip{
  padding-top: 80px;

  img{
    display: block;
    width: 160px;
    margin: 0 auto;
  }

  p{
    color: $text-color-regular;

    line-height: 20px;
    text-align: center;

    margin: 8px 0 0 0;
  }
}

.product-template-selected-list{
  height: 100%;
  padding: 10px;
  overflow-y: auto;
}

.product-template-selected-row{
  border-bottom: 1px solid #ebeef5;

  display: flex;
  flex-flow: row nowrap;

  font-size: 13px;
  line-height: 36px;


  &:hover{
    background-color: #f5f7fa;

    .product-template-selected-delete{
      visibility: visible;
    }
  }
}

.product-template-selected-head{
  background-color: #F0F5F5;
  color: #333;
  font-size: 14px;
}

.product-template-selected-sn{
  padding-left: 10px;
  flex: 1;
  @include text-ellipsis;
}

.product-template-selected-name{
  padding-left: 10px;
  width: 150px;
  @include text-ellipsis;
}

.product-template-selected-delete{
  width: 36px;
}

.product-template-selected-row button.product-template-selected-delete{
  background-color: transparent;
  color: #646B78;

  border: none;
  
  padding: 0;
  width: 36px;
  height: 36px;

  outline: none;
  visibility: hidden;

  i{
    font-size: 14px;
  }

  &:hover{
    color: #e84040;
  }
}

// operation
.product-template-columns-dropdown-menu {
  max-height: 300px;
  overflow: auto;
  .el-dropdown-menu__item{
    padding: 0;
  }
  .el-checkbox {
    width: 100%;
    padding: 5px 15px;
    margin: 0;
  }
}

.operation-bar-container {
  background: #fff;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 0;

  .top-btn-group .base-button {
    margin-right: 5px;
  }

  .action-button-group {
    .base-button {
      margin-left: 5px;
    }
  }

  .el-dropdown-btn {
    background-color: transparent;
    display: inline-block;
    line-height: 32px;
    outline: none;
    .iconfont {
      margin-left: 5px;
    }
    &:hover {
      background-color: transparent;
      cursor: pointer;
      @include fontColor();
    }
  }
}
</style>
<style lang="scss">
  @import "@src/assets/scss/common-list.scss";
</style>